<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          label-width="120px"
          v-show="showSearch"
        >
          <el-form-item label="智库类成果类型" prop="thinktankType">
            <el-input
              v-model="queryParams.thinktankType"
              placeholder="请输入类型"
              clearable
              size="small"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="智库类成果等级" prop="thinktankLevel">
            <el-select
              placeholder="请选择论文级别"
              v-model="queryParams.thinktankLevel"
              clearable
              style="width: 260px"
            >
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 重置需要改名 -->
          <el-form-item>
            <el-button
              type="primary"
              icon="Search"
              @click="handleQuery"
              size="mini"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="getAll" size="mini"
              >重置</el-button
            >
            <el-button icon="Tickets" size="mini" @click="handleRef"
              >参考</el-button
            >
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="Plus"
              size="mini"
              @click="handleAdd"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="Edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="Delete"
              size="mini"
              :disabled="single"
              @click="handleDelete"
              >删除</el-button
            >
          </el-col>
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>

        <!-- 论文成果转化表 -->
        <el-table
          v-loading="loading"
          :data="paperList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column
            label="分类代码"
            width="80"
            align="center"
            prop="code"
          />
          <el-table-column
            label="课题类型"
            align="center"
            prop="thinktankType"
            overflow:hidden
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="课题等级"
            align="center"
            prop="thinktankLevel"
            width="90"
          />
          <el-table-column
            label="工作量Max"
            align="center"
            prop="workloadMax"
            width="90"
          />
          <el-table-column
            label="工作量Min"
            align="center"
            prop="workloadMin"
            width="90"
          />
          <el-table-column
            label="备注"
            align="center"
            prop="remark"
            width="100"
            overflow:hidden
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="创建时间"
            align="center"
            prop="createdTime"
            width="160"
          />
          <el-table-column
            label="更新时间"
            align="center"
            prop="updatedTime"
            width="160"
          />
          <el-table-column
            label="操作"
            align="center"
            width="150"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                icon="Edit"
                @click="handleUpdate(scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                v-if="scope.row.roleId !== 1"
                type="text"
                icon="Delete"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <!-- 新增表单对话框 -->
    <el-dialog :title="title" v-model="addopen" width="400px" append-to-body>
      
      <el-form ref="paperRef" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="分类代码" prop="code">
        <el-input placeholder="请输入分类代码" v-model="form.code" />
      </el-form-item>
        <el-form-item label="类型" prop="thinktankType">
          <el-input placeholder="请输入类型" v-model="form.thinktankType" />
        </el-form-item>
        <el-form-item label="工作量Max" prop="workloadMax">
          <el-input-number
            :min="0"
            placeholder="请输入工作量最大值"
            controls-position="right"
            v-model="form.workloadMax"
            style="width: 260px"
          />
        </el-form-item>
        <el-form-item label="工作量Min" prop="workloadMin">
          <el-input-number
            :min="0"
            placeholder="请输入工作量最小值"
            controls-position="right"
            v-model="form.workloadMin"
            style="width: 260px"
          />
        </el-form-item>
        <el-form-item label="等级" prop="thinktankLevel">
          <el-select
            placeholder="请选择论文级别"
            v-model="form.thinktankLevel"
            clearable
            style="width: 260px"
          >
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 参考表单 -->
    <el-dialog :title="title" v-model="open" width="650px" append-to-body>
      <el-table :data="refData" border style="width: 100%">
        <el-table-column
          prop="number"
          label="序 号"
          width="80"
          align="center"
        />
        <el-table-column prop="paper" label="论文、成果转化" align="center" />
        <el-table-column
          prop="category"
          label="类别"
          width="100"
          align="center"
        />
        <el-table-column
          prop="workload"
          label="工作量"
          width="100"
          align="center"
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup name="eduawardDict">
import {
  listAll,
  addDict,
  delDict,
  getDict,
  updateDict,
} from "@/api/nepu_dict/thinktank";
const showSearch = ref(true);
const open = ref(false);
const title = ref("");
const loading = ref(true);
const paperList = ref([]);
const total = ref(0);
const addopen = ref(false);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const { proxy } = getCurrentInstance();
const categoryOptions = ref([
  { value: "A1", label: "A1", disabled: false },
  { value: "A2", label: "A2", disabled: false },
  { value: "B1", label: "B1", disabled: false },
  { value: "B2", label: "B2", disabled: false },
  { value: "C1", label: "C1", disabled: false },
  { value: "C2", label: "C2", disabled: false },
]);
const refData = [
  {
    number: "1",
    paper:
      "成果编入国家社科基金《成果要报》《教育部简报（高校智库专刊）》等为党和国家领导人直接服务的决策咨询专刊专报；成果被中共中央或国务院采纳，或获得国家党政领导人（副总理以上）肯定性批示并进入国家决策，或被选为全国政协大会发言材料",
    category: "A",
    workload: "300",
  },
  {
    number: "2",
    paper:
      "成果编入省规划办《成果要报》，或编入省委宣传部主办的《智库专报》，或其他部委决策咨询专刊专报；成果获得省部级领导（副省级以上）肯定性批示并被采纳应用，或转化为省部级有关部门的规划、政策、文件等（提供证明材料），或被省部级有关部门采纳、转发（提供证明材料），或被“厚植龙江沃土、深度回归油田”东北石油大学暑期调研活动评为一等奖（提供证明材料）。",
    category: "B",
    workload: "200",
  },
  {
    number: "3",
    paper:
      "编入其他省级以上决策咨询专刊专报或被“厚植龙江沃土、深度回归油田”东北石油大学暑期调研活动评为二等奖（提供证明材料）。",
    category: "B",
    workload: "80",
  },
];
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    totalPages: undefined,
    thinktankLevel: undefined,
    thinktankType: undefined,
  },
  rules: {
    //v-modle.number才可以
    workloadMax: [
      { required: true, message: "不能为空", trigger: "blur" },
      { type: "number", min: 0,  message: "工作量不得小于0" },
    ],
    workloadMin: [
      { required: true, message: "不能为空", trigger: "blur" },
      { type: "number", min: 0,  message: "工作量不得小于0" },
    ],
    thinktankType: [
      { required: true, message: "不能为空", trigger: "blur" },
      {
        min: 2,
        max: 50,
        message: "类型名称长度必须介于 2 和 50 ccv 之间",
        trigger: "blur",
      },
    ],
    thinktankLevel: [
      { required: true, message: "不能为空", trigger: "change" },
    ],
    code:[
      {required: true, message: "不能为空", trigger: "blur" }
    ]
  },
});
const { queryParams, form, rules } = toRefs(data);
// 显示全部按钮
function getAll() {
  queryParams.value.thinktankLevel = undefined;
  queryParams.value.thinktankType = undefined;
  getList();
}
//新增
function handleAdd() {
  reset();
  addopen.value = true;
  title.value = "添加智库类成果";
}
/** 确认新增操作 */
function submitForm() {
  proxy.$refs["paperRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != undefined) {
        console.log(form.value.id);
        updateDict(form.value).then((response) => {
          console.log(form.value);
          proxy.$modal.msgSuccess("修改成功");
          addopen.value = false;
          getList();
        });
      } else {
        addDict(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          addopen.value = false;
          getList();
        });
      }
    }
  });
}

// 查询列表
function getList() {
  loading.value = true;
  listAll(proxy.addDateRange(queryParams.value)).then((response) => {
    paperList.value = response.content;
    // total.value = paperList.value.length;
    total.value = response.totalElements;
    loading.value = false;
  });
}
//搜索按钮
function handleQuery() {
  console.log("调用查询");
  queryParams.value.pageNum = 1;
  // console.log(queryParams.value.workload);
  getList();
  //   handleRef();搜索清理
}
//测试
// function queryById(id) {
//     reset();
//     const ID = id || ids.value;
//     loading.value = true;
//     getDict(ID).then(response => {
//         console.log(response.data);
//         reset2();
//         console.log(paperList.value);
//         queryParams.value.pageNum = 1;
//         paperList.value = response.data;
//         loading.value = false;
//     });
// }
/** 取消按钮操作 */
function cancel() {
  open.value = false;
  addopen.value = false;
  reset();
}
//删除按钮操作--------------------------------------------------- row  ids
function handleDelete(row) {
  const paperIds = row.id || ids.value;
  proxy.$modal
    .confirm("是否确认删除成果词典ID为" + paperIds + "的数据项")
    .then(function () {
      return delDict(paperIds);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  console.log(row);
  const ID = row.id || ids.value;
  getDict(ID).then((response) => {
    form.value = response;
    addopen.value = true;
    title.value = "修改";
  });
}
/** 参考表单 */
function handleRef() {
  title.value = "参考";
  open.value = true;
}
/** 重置form表单 */
function reset() {
  form.value = {
    thinktankType: undefined,
    thinktankLevel: undefined,
    workloadMax: 0,
    workloadMin: 0,
    code:undefined
  };
  proxy.resetForm("paperRef");
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

getList();
</script>

<style  scoped>
</style>
